<template>
    <div class="ItemMusicFooter">
       <!-- 底部播放组件的左边 -->
       <div class="ItemMusicFooterLeft" @click = "updateDetailShow">
            <img :src="playList[playListIndex].al.picUrl" alt="">
            <div class="gx">
                <p>{{ playList[playListIndex].name }}</p>
                <span>左右滑动可切换上下曲目</span>
            </div>
       </div>
       <!-- 底部播放组建的右边 -->
       <div class="ItemMusicFooterRight">
        <!-- 播放 -->
            <svg class="icon" aria-hidden="true" v-if="isPlayShow" @click="play">
                <use xlink:href="#icon-bofang1"></use>
            </svg>  
        <!-- 暂停 -->
            <svg class="icon" aria-hidden="true" v-else="updateIsPlayShow" @click="play">
                <use xlink:href="#icon-zanting"></use>
            </svg> 

            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-ziyuan"></use>
            </svg>  
       </div>
       <!-- 实现音乐的播放 -->
       <audio ref="audio" :src="'https://music.163.com/song/media/outer/url?id='+playList[playListIndex].id+'.mp3 '"></audio>

       <!-- 点击实现弹出层展示歌曲的详情，使用vant4里面的popup组件 -->
       <van-popup v-model:show="detailShow" position="right" :style="{ height: '100%',width:'100%' }" >
            <ItemMusicDetail :musicDetail = 'playList[playListIndex]' 
            :play="play" 
            :isPlayShow="isPlayShow" 
            :addDuration='addDuration'/>
       </van-popup>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

// 导入弹出层的组件
import ItemMusicDetail from '@/components/item/ItemMusicDetail.vue'


export default {
    data() {
        return {
            interVal:0
        }
    },
    computed: {
        // 通过辅助函数获取在store里面声明的数组和声明的变量
        ...mapState(['playList', 'playListIndex', 'isPlayShow', 'detailShow','currentTime']),

    },
    mounted() {
        // console.log(this.$refs)
        this.$store.dispatch('getLyric', this.playList[this.playListIndex].id)
        this.updateTime() 
    },
    updated() {
        this.$store.dispatch('getLyric', this.playList[this.playListIndex].id)
        this.addDuration()
        this.updateTime()
        
    },
    methods: {
        //  按钮点击事件
        play: function () {
            if (this.$refs.audio.paused) {
                // 点击了之后播放，同时将isPlayShow的属性设置为false
                this.$refs.audio.play()
                this.updateIsPlayShow(false)
                // 播放的时候调用函数进行传值
                this.updateTime()
            } else {
                this.$refs.audio.pause()
                this.updateIsPlayShow(true)
                // 暂停的时候清除定时器
                clearInterval(this.interVal)
            }
        },
        // 更新播放按钮方法的结构
        ...mapMutations(['updateIsPlayShow', 'updateDetailShow','updateCurrentTime','updateDuration']),
        // 计时器
        updateTime: function () {
            this.interVal = setInterval(() => {
                this.updateCurrentTime(this.$refs.audio.currentTime)
            }, 1);
        },

        // 添加总时长
        addDuration: function () {
            this.updateDuration (this.$refs.audio.duration) 
            // console.log(this.updateDuration)
         }
        
    },
    watch: {
        //  监听是否点击了歌曲列表，也就是下标值
        playListIndex: function () {
            // 监听下标是否改变，就自动播放音乐
            this.$refs.audio.autoplay = true;
            this.updateIsPlayShow(false)
            // if (this.$refs.audio.paused) {
            //     //  如果是暂停播放，改变图标
            //     this.updateIsPlayShow(false)
            // } else {
            //     this.updateIsPlayShow(true)
            // }
        },
        //若只监听下标，那么我们在点击进入歌单的时候，点击第一首歌，
        //并不会自动播放，所以我们还要监听播放列表，也就是playList是否发生变化
        playList: function () {
            // 判断是否为播放状态
            if (this.isPlayShow) {
                this.$refs.audio.autoplay = true;
                this.updateIsPlayShow(false)
            }
        }
    },
    components: {
        ItemMusicDetail
    }
    
}


</script>

<style lang="less" scoped>

.ItemMusicFooter{
    width: 98%;
    height:6.5vh;
    // position: fixed;元素应相对于视口或浏览器窗口本身定位。这意味着即使用户滚动页面，该元素也将保持在屏幕上的相同位置。
    position: fixed;
    bottom: 0.2vh;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    border-radius: 5vw;
    background-color:rgb(42, 37, 37);
    display: flex;
    margin-left: 1%;
    justify-content: space-between;

    // 底部播放组件左边
    .ItemMusicFooterLeft{
        display: flex;
        height: 6.5vh;
        align-items: center;

        img{
            width: 13vw;
            height: 13vw;
            margin: 2vw;
            border-radius: 50%;
            
        }
        .gx{ 
            margin-left: 1vw;
            p{
                font-size: 4vw;
                font-weight: bold;
                color: white;
            }
            span{
                font-size: 2.5vw;
                color: #aea4a4;
            }
        }
       


    }
    // 底部播放器组件右边
    .ItemMusicFooterRight{
        margin-right: 2vw;
        width: 24vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .icon{
            width: 10vw;
            height: 10vw;
        }
    }
}

</style>